/* 定义全局变量 */

@main-color: #006699;
@border-color: #ccc;

/* 1. 设置根元素的字体大小 让页面先以375标准屏幕来写代码 因为MUI已经是rem代码 参照的1rem=100px; */

html {
    font-size: 100px;
}


/* 把body的默认字体设置为16px */

body {
    font-size: 0.14rem;
    background-color: #fff;
    padding: 0.45rem 0;
}

img {
    /* 去除图片和块级元素的3px间隙问题 */
    vertical-align: middle;
}


/* 去掉ul默认padding */

* {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}


/* 设置a默认颜色 */

a {
    color: #666;
}


/* 给html 和 body固定高度 */

html,
body {
    height: 100%;
}


/* 给中间主体部分高度也是100% */

#main {
    height: 100%;
    overflow: hidden;
    /* 注意还要给main加一个相对定位 因为里面的mui-scroll-wrapper设置了绝对定位 */
    position: relative;
}


/* 公共的头部区域样式 */

#header {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
    width: 100%;
    height: 0.45rem;
    background-color: @main-color;
    text-align: center;
    padding: 0 0.45rem;
    .fa-arrow-left {
        position: absolute;
        left: 0;
        top: 0;
        width: 0.45rem;
        height: 0.45rem;
        line-height: 0.45rem;
        color: #fff;
    }
    h4 {
        margin: 0;
        font-weight: normal;
        line-height: 0.45rem;
        color: #fff;
    }
    form {
        padding-top: 0.05rem;
        input {
            background-color: #fff;
            /* 默认文字居中 点击居左 设置默认居左 */
            text-align: left;
            font-size: 0.14rem;
            /* 去掉输入框默认的底部margin */
            margin-bottom: 0;
        }
    }
    .fa-search,
    .fa-home,
    .fa-refresh {
        position: absolute;
        width: 0.45rem;
        height: 0.45rem;
        line-height: 0.45rem;
        right: 0;
        top: 0;
        color: #fff;
    }
}


/* 底部的公共样式 */

#footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 999;
    width: 100%;
    height: 0.45rem;
    background-color: @main-color;
    a {
        display: block;
        color: #fff;
        text-align: center;
        padding: 0.05rem 0px;
        &.active {
            color: orange;
        }
        i {
            line-height: 0.14rem;
            vertical-align: middle;
        }
        span {
            display: block;
            line-height: 0.14rem;
            transform: translateY(-0.02rem);
        }
    }
}


/* 搜索表单的公共样式 */


/* 搜索的表单 */

.search-form {
    form {
        display: flex;
        padding: 10px;
        input {
            flex: 1;
            margin-bottom: 0;
            background-color: #fff;
            border: 0.01rem solid @main-color;
            text-align: left;
            font-size: 0.14rem;
            border-radius: 0.06rem 0 0 0.06rem;
        }
        button {
            width: 0.6rem;
            background-color: @main-color;
            border: 0.01rem solid @main-color;
            border-radius: 0 0.06rem 0.06rem 0;
        }
    }
}

.product-box {
    a {
        display: block;
        img {
            width: 100%;
        }
    }
    .left {
        margin-top: 10px;
        padding: 0 5px;
        a {
            padding: 10px 0;
            box-shadow: 0px 0px 1px #ccc;
            text-align: center;
            .product-name {
                /* 超出隐藏 */
                overflow: hidden;
                /* 文本超出显示... */
                text-overflow: ellipsis;
                /* CSS盒模型必须设置 */
                display: -webkit-box;
                /* 定义子元素的排列方向 垂直方向 */
                -webkit-box-orient: vertical;
                /* 垂直方向 定义子元素排列的函数 */
                -webkit-line-clamp: 2;
            }
        }
    }
}

.mask {
    position: fixed;
    background-color: #ccc;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 980;
}


/* 加载中的公共样式 */

.spinner {
    width: 0.8rem;
    height: 0.8rem;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    img {
        width: 2.0rem;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius:50%;
    }
}

.container1 > div,
.container2 > div,
.container3 > div {
    width: 0.15rem;
    height: 0.15rem;
    background-color: hotpink;
    border-radius: 100%;
    position: absolute;
    animation: bouncedelay 1.2s infinite ease-in-out;
    animation-fill-mode: both;
}

.spinner .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.container2 {
    transform: rotateZ(45deg);
}

.container3 {
    transform: rotateZ(90deg);
}

.circle1 {
    top: 0;
    left: 0;
}

.circle2 {
    top: 0;
    right: 0;
}

.circle3 {
    right: 0;
    bottom: 0;
}

.circle4 {
    left: 0;
    bottom: 0;
}

.container2 .circle1 {
    animation-delay: -1.1s;
}

.container3 .circle1 {
    animation-delay: -1.0s;
}

.container1 .circle2 {
    animation-delay: -0.9s;
}

.container2 .circle2 {
    animation-delay: -0.8s;
}

.container3 .circle2 {
    animation-delay: -0.7s;
}

.container1 .circle3 {
    animation-delay: -0.6s;
}

.container2 .circle3 {
    animation-delay: -0.5s;
}

.container3 .circle3 {
    animation-delay: -0.4s;
}

.container1 .circle4 {
    animation-delay: -0.3s;
}

.container2 .circle4 {
    animation-delay: -0.2s;
}

.container3 .circle4 {
    animation-delay: -0.1s;
}

@keyframes bouncedelay {
    0%,
    80%,
    100% {
        transform: scale(0.0);
    }
    40% {
        transform: scale(1.0);
    }
}
